<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案件修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- 难点：元素可能需要嵌套，事件可能嵌套  -->
		数值：{{num}}
		<div @click="num++">
			嵌套结构
			<button @click.stop="num++">计算</button>
		</div>
		<!-- 需求二：
		 a标签作用：超链接
		 a标签作用中的href的跳转是默认规则
		 要求：用户点击a标签 不跳转页面，同时触发事件
		 解决：阻止标签默认行为@click.prevent
		 -->
		 <a href="http://baidu.com" @click.prevent="aClick()">百度</a>
		 <!-- 用途 prevent阻止页面跳转 a标签/form表单 action 同步请求 -->
		</div>
		<script src="../js/vue.js" ></script>
		<script>
			const APP=new Vue({
				el: "#app",
				data: {
					num: 0,
				},
				methods: {
					aClick(){
						console.log("事件触发")
					}
				}
			})
		</script>
	</body>
</html>
